<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="box"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <!-- React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库，是Facebook开发 -->
    <!-- react 高效  使用虚拟DOM  DOM  diff  -->
    <!-- react的核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 提供了操作DOM的react扩展库 -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 解析jsx语法的代码转换为js语法 -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
        // 创建DOM元素
        const vDOM = <h1>hell react</h1>;
        // 渲染虚拟DOM到页面真实DOM中
        ReactDOM.render(vDOM,document.getElementById('box'));    
    </script>
    <script type="text/javascript">
        // 纯js创建DOM虚拟DOM
        const vDom = React.createElement('h1', {
            id: 'helloJs'
        }, 'hello world');
        // 渲染虚拟DOM
        ReactDOM.render(vDom, document.getElementById('box1'));
    </script>
    <!-- 浏览器不能直接解析jsx代码，需要babel将其转换为js代码，哪里用jsx语法，哪里的script标签上的type属性 type="text/babel" （意思声明需要babel来处理） -->
    <script type="text/babel">
        // 使用jsx方式创建DOM
        const msg = "jintiantianqihaoqinglang!";
        // jsx语法全称是JavaScript XML  html+js
        // 遇到<开头的代码，以html标签的语法解析
        // 遇见{开头的代码，以js语法来解析
        const vDom1 = <h1>{msg.toUpperCase()}</h1>
        // 渲染DOM
        ReactDOM.render(vDom1,document.getElementById('box2'));
    </script>
    <script type="text/babel">
        const list = ['张栋迟到','为什么','没带纸'];
        const vDom2 = <ul>{list.map((item,index)=> <li key={index}>{item}</li>)}</ul>
        ReactDOM.render(vDom2,document.getElementById('box3'));
    </script>
</body>

</html>